﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@using Raffles.OA.Data
@using Raffles.OA.Utility
<style>
    body {
        overflow-y: hidden;
    }

    .tabs-container .nav-tabs > li.active > a, .tabs-container .nav-tabs > li.active > a:hover, .tabs-container .nav-tabs > li.active > a:focus {
        background-color: #1890ff;
        color: #ffffff;
    }

    .table-hover > tbody > tr:hover,
    .bootstrap-table .fixed-table-container .table tbody tr.selected td {
        background-color: #FFDAB9;
        cursor: pointer;
    }

    ::-webkit-scrollbar {
        height: auto;
    }
</style>
<link href="/Content/plugin/bootstrap.datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#tab-1">操作销售提成</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-2" onclick="salerAmount()">操作销售总额</a>
                    </li>
                    <li class="">
                        <a data-toggle="tab" href="#tab-3" onclick="salerGroupAmount()">团队销售总额</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="box">
                            <div class="box-header" id="searchDivSalerCommison">
                                <div class="col-md-4 col-xs-12">
                                    <div class="input-group">
                                        <div class="input-group-addon">销售年份</div>
                                        <input type='text' class="form-control" placeholder="请选择销售年份" id="saleYearCommision" col="SaleYear" />
                                    </div>
                                </div>
                                <div class="col-md-4 col-xs-12">
                                    <div class="input-group">
                                        <div class="input-group-addon">销售人员</div>
                                        <select id="salerIdCommision" col="SalerId" class="form-control">
                                            <option value="">全部</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-1 col-xs-12 text-center pull-right">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-primary" onclick="searchSalerCommisonGrid()"><i class="fa fa-search"></i> 查询</a>
                                </div>
                            </div>
                        </div>
                        <div class="box box-info">
                            <div class="box-body">
                                <div class="table-responsive">
                                    <div class="btn-group-sm" id="toolbarSalerCommision" role="group">
                                        <a class="btn btn-xs btn-warning" onclick="exportSalerCommisionForm()"><i class="fa fa-download"></i> 导出</a>
                                    </div>
                                    <table id="gridTableSalerCommision" class="table table-hover text-nowrap">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-2" class="tab-pane">
                        <div class="box">
                            <div class="box-header" id="searchDivSalerAmount">
                                <div class="col-md-4 col-xs-12">
                                    <div class="input-group">
                                        <div class="input-group-addon">销售年份</div>
                                        <input type='text' class="form-control" placeholder="请选择销售年份" id="saleYearAmount" col="SaleYear" />
                                    </div>
                                </div>
                                <div class="col-md-4 col-xs-12">
                                    <div class="input-group">
                                        <div class="input-group-addon">销售人员</div>
                                        <select id="salerIdAmount" col="SalerId" class="form-control">
                                            <option value="">全部</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-1 col-xs-12 text-center pull-right">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-primary" onclick="searchSalerAmountGrid()"><i class="fa fa-search"></i> 查询</a>
                                </div>
                            </div>
                        </div>
                        <div class="box box-info">
                            <div class="box-body">
                                <div class="table-responsive">
                                    <div class="btn-group-sm" id="toolbarSalerAmount" role="group">
                                        <a class="btn btn-xs btn-warning" onclick="exportSalerAmountForm()"><i class="fa fa-download"></i> 导出</a>
                                    </div>
                                    <table id="gridTableSalerAmount" class="table table-hover text-nowrap">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab-3" class="tab-pane">
                        <div class="box">
                            <div class="box-header" id="searchDivSalerGroupAmount">
                                <div class="col-md-4 col-xs-12">
                                    <div class="input-group">
                                        <div class="input-group-addon">销售年份</div>
                                        <input type='text' class="form-control" placeholder="请选择销售年份" id="saleYearGroupAmount" col="SaleYear" />
                                    </div>
                                </div> 
                                <div class="col-md-1 col-xs-12 text-center pull-right">
                                    <a href="javascript:void(0);" class="btn btn-sm btn-primary" onclick="searchSalerGroupAmountGrid()"><i class="fa fa-search"></i> 查询</a>
                                </div>
                            </div>
                        </div>
                        <div class="box box-info">
                            <div class="box-body">
                                <div class="table-responsive">
                                    <div class="btn-group-sm" id="toolbarSalerGroupAmount" role="group">
                                        <a class="btn btn-xs btn-warning" onclick="exportSalerGroupAmountForm()"><i class="fa fa-download"></i> 导出</a>
                                    </div>
                                    <table id="gridTableSalerGroupAmount" class="table table-hover text-nowrap">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="/Content/plugin/bootstrap.datepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/Content/plugin/bootstrap.datepicker/js/moment-with-locales.js"></script>
<script type="text/javascript">

    $(function () {
        $("#saleYearCommision").datetimepicker({
            format: 'YYYY',
            locale: moment.locale('zh-cn'),
            defaultDate: moment().format('YYYY')
        });
        $("#salerIdCommision").frameSelect({
            url: "@Url.Action("GetSalerSelect", "Project",new { area = "Sale" })"
        });
        initGridTableSalerCommison();
        resetBootstrapTableView('gridTableSalerCommision', 180);

    });

    //操作销售提成
    function initGridTableSalerCommison() {
        $('#gridTableSalerCommision').frameTable({
            url: '@Url.Action("GetSalerCommisionPageListJson", "Project")',
            striped: false,
            toolbar: '#toolbarSalerCommision',
            columns: [
                {
                    field: 'SaleName', title: '销售姓名', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        return "<span class='text-bold text-orange'>" + value + "</span>";
                    }
                },
                {
                    field: 'January', title: '1月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'February', title: '2月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'March', title: '3月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'April', title: '4月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'May', title: '5月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'June', title: '6月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'July', title: '7月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'August', title: '8月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'September', title: '9月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'October', title: '10月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'November', title: '11月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'December', title: '12月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'Total', title: '合计', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold text-green'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTableSalerCommision').frameTable('getPagination', params);
                var queryString = $('#searchDivSalerCommison').getWebControls(pagination);
                return queryString;
            },
        });
    }

    function searchSalerCommisonGrid() {
        $('#gridTableSalerCommision').frameTable('search');
    }

    function exportSalerCommisionForm() {
        var url = '@Url.Action("ExportSalerCommisionJson", "Project")';
        var postData = $("#searchDivSalerCommison").getWebControls();
        frame.exportExcel(url, postData);
    }

    //操作销售金额
    function salerAmount() {
        $("#saleYearAmount").datetimepicker({
            format: 'YYYY',
            locale: moment.locale('zh-cn'),
            defaultDate: moment().format('YYYY')
        });
        $("#salerIdAmount").frameSelect({
            url: "@Url.Action("GetSalerSelect", "Project",new { area = "Sale" })"
        });
        initGridTableSalerAmount();
        resetBootstrapTableView('gridTableSalerAmount', 180);
    }

    function initGridTableSalerAmount() {
        $('#gridTableSalerAmount').frameTable({
            url: '@Url.Action("GetSalerAmountPageListJson", "Project")',
            striped: false,
            toolbar: '#toolbarSalerAmount',
            columns: [
                {
                    field: 'SaleName', title: '销售姓名', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        return "<span class='text-bold text-orange'>" + value + "</span>";
                    }
                },
                {
                    field: 'January', title: '1月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'February', title: '2月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'March', title: '3月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'April', title: '4月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'May', title: '5月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'June', title: '6月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'July', title: '7月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'August', title: '8月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'September', title: '9月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'October', title: '10月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'November', title: '11月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'December', title: '12月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'Total', title: '合计', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold text-green'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTableSalerAmount').frameTable('getPagination', params);
                var queryString = $('#searchDivSalerAmount').getWebControls(pagination);
                return queryString;
            },
        });
    }

    function searchSalerAmountGrid() {
        $('#gridTableSalerAmount').frameTable('search');
    }

    function exportSalerAmountForm() {
        var url = '@Url.Action("ExportSalerAmountJson", "Project")';
        var postData = $("#searchDivSalerAmount").getWebControls();
        frame.exportExcel(url, postData);
    }

    //团队销售金额
    function salerGroupAmount() {
        $("#saleYearGroupAmount").datetimepicker({
            format: 'YYYY',
            locale: moment.locale('zh-cn'),
            defaultDate: moment().format('YYYY')
        }); 
        initGridTableSalerGroupAmount();
        resetBootstrapTableView('gridTableSalerGroupAmount', 180);
    }

    function initGridTableSalerGroupAmount() {
        $('#gridTableSalerGroupAmount').frameTable({
            url: '@Url.Action("GetSalerGroupAmountPageListJson", "Project")',
            striped: false,
            toolbar: '#toolbarSalerGroupAmount',
            columns: [ 
                {
                    field: 'January', title: '1月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'February', title: '2月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'March', title: '3月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'April', title: '4月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'May', title: '5月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'June', title: '6月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'July', title: '7月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'August', title: '8月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'September', title: '9月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'October', title: '10月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'November', title: '11月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'December', title: '12月', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                },
                {
                    field: 'Total', title: '合计', halign: "center", align: "center",
                    formatter: function (value, row, index) {
                        if (value > 0) {
                            return "<span class='text-bold text-green'>" + value.toFixed(2) + "</span>";
                        }
                        else {
                            return value.toFixed(2);
                        }
                    }
                }
            ],
            queryParams: function (params) {
                var pagination = $('#gridTableSalerGroupAmount').frameTable('getPagination', params);
                var queryString = $('#searchDivSalerGroupAmount').getWebControls(pagination);
                return queryString;
            },
        });
    }

    function searchSalerGroupAmountGrid() {
        $('#gridTableSalerGroupAmount').frameTable('search');
    }

    function exportSalerGroupAmountForm() {
        var url = '@Url.Action("ExportSalerGroupAmountJson", "Project")';
        var postData = $("#searchDivSalerGroupAmount").getWebControls();
        frame.exportExcel(url, postData);
    }
</script>